<template>
  <div class="personal-info-display">
    <el-skeleton :loading="loading" animated>
      <template #template>
        <el-skeleton-item variant="text" style="width: 30%" />
        <el-skeleton-item variant="text" style="width: 50%" />
        <el-skeleton-item variant="text" style="width: 40%" />
        <el-skeleton-item variant="text" style="width: 60%" />
      </template>
      
      <template #default>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学号">
            <span class="info-value">{{ studentInfo.studentId || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="姓名">
            <span class="info-value">{{ studentInfo.name || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="性别">
            <span class="info-value">{{ formatGender(studentInfo.sex) }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="联系电话">
            <span class="info-value">{{ studentInfo.contactPhone || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="专业">
            <span class="info-value">{{ studentInfo.majorName || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="班级">
            <span class="info-value">{{ studentInfo.className || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="宿舍楼">
            <span class="info-value">{{ studentInfo.dormBuilding || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="房间号">
            <span class="info-value">{{ studentInfo.roomNumber || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="紧急联系人">
            <span class="info-value">{{ studentInfo.emergencyContact || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="紧急联系电话">
            <span class="info-value">{{ studentInfo.emergencyPhone || '暂无' }}</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="账户状态">
            <el-tag :type="getStatusType(studentInfo.status)">
              {{ formatStatus(studentInfo.status) }}
            </el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="缴费状态">
            <el-tag :type="getPaymentStatusType(studentInfo.paymentStatus)">
              {{ formatPaymentStatus(studentInfo.paymentStatus) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// 定义props
const props = defineProps({
  studentInfo: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 格式化性别
const formatGender = (sex) => {
  if (sex === 1 || sex === '1') return '男'
  if (sex === 0 || sex === '0') return '女'
  return '未设置'
}

// 格式化账户状态
const formatStatus = (status) => {
  switch (status) {
    case 1:
    case '1':
      return '正常'
    case 0:
    case '0':
      return '禁用'
    default:
      return '未知'
  }
}

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 1:
    case '1':
      return 'success'
    case 0:
    case '0':
      return 'danger'
    default:
      return 'info'
  }
}

// 格式化缴费状态
const formatPaymentStatus = (paymentStatus) => {
  switch (paymentStatus) {
    case 1:
    case '1':
      return '已缴费'
    case 0:
    case '0':
      return '未缴费'
    default:
      return '未知'
  }
}

// 获取缴费状态标签类型
const getPaymentStatusType = (paymentStatus) => {
  switch (paymentStatus) {
    case 1:
    case '1':
      return 'success'
    case 0:
    case '0':
      return 'warning'
    default:
      return 'info'
  }
}
</script>

<style scoped>
.personal-info-display {
  padding: 20px 0;
}

.info-value {
  color: #606266;
  font-weight: 500;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__content) {
  color: #606266;
}

:deep(.el-descriptions) {
  margin-top: 0;
}

:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions-item__cell) {
  padding: 12px 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-descriptions) {
    --el-descriptions-item-bordered-label-background: #fafafa;
  }
  
  :deep(.el-descriptions-item__cell) {
    padding: 8px 10px;
  }
}
</style>